<template>
    <el-card class="order">
        <div class="order-item">
            <div class="text" :class="textType=='integrated'?'active':''" @click="orderPage('integrated')">{{textType=='integrated'?'综合':'综合排序'}}</div>
            <div class="text" :class="textType=='sellCountDesc'?'active':''" @click="orderPage('sellCountDesc')">{{textType=='sellCountDesc'?'销量由高到低':'销量'}}</div>
            <div class="text" v-if="router.currentRoute.value.path=='/video_course'" :class="textType=='favorableValueDesc'?'active':''" @click="orderPage('favorableValueDesc')">{{textType=='favorableValueDesc'?'评价由高到底':'评价'}}</div>
            <div class="text"  :class="textType=='viewCountDesc'?'active':''" @click="orderPage('viewCountDesc')">{{textType=='viewCountDesc'?'浏览量由高到低':'浏览量'}}</div>
            <div class="selected">
                <span style="font-size: 14px;" v-if="!flag" @mouseenter="flag=true">{{price}}<span style="margin-left: 5px"><el-icon><ArrowDown /></el-icon></span></span>
                <div class="main" v-if="flag" @mouseleave="flag=false">
                    <span class="item" :class="textType=='priceDesc'?'active':''" @mousemove="move('priceDesc')" @click="orderPage('priceDesc')">价格由高到低</span>
                    <span class="item" :class="textType=='priceAsc'?'active':''" @mousemove="move('priceAsc')" @click="orderPage('priceAsc')">价格由低到高</span>
                </div>
            </div>
<!--            priceAsc-->
            <div class="text" v-if="router.currentRoute.value.path=='/live_course'" :class="textType=='startTimeAsc'?'active':''" @click="orderPage('startTimeAsc')">{{textType=='startTimeAsc'?'开课时间由近及远':'开课时间'}}</div>
            <div class="text" v-else :class="textType=='onsellTimeDesc'?'active':''" @click="orderPage('onsellTimeDesc')">{{textType=='onsellTimeDesc'?'发布时间由近及远':'发布时间'}}</div>

        </div>
    </el-card>
</template>
<script setup lang="ts">
import {useRouter} from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'
import {defineEmits, onMounted, ref} from "vue";
const emits=defineEmits<{
    (e:'pageInit',data:any):void
}>()
const flag=ref(false)
const router=useRouter()
const currentPath=ref('')
const pageSize=ref(20)
const limit=ref(0)
const textType=ref('integrated')
const price=ref('价格')
const orderPage=async (type:string)=>{
    textType.value=type
    if (type=='priceDesc'){
        price.value='价格由高到低'
    }else if (type=='priceAsc'){
        price.value="价格由低到高"
    }else {
        price.value="价格"
    }
    flag.value=false
    emits('pageInit', {sort:type})
}
const move=(type:string)=>{
    textType.value=type
}
const routePath=()=>{
    currentPath.value=router.currentRoute.value.path
}
onMounted(()=>{
    routePath()
})

const handleCommand = (command: string | number | object) => {
    ElMessage(`click on item ${command}`)
}
</script>
<style lang="less" scoped>
.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}
</style>

<style lang="less" scoped>
.order{
    width:1200px;
    height:70px;
    margin-top: 10px;
    .order-item{
        display:flex;
        padding-left: 20px;
        //margin-top: 20px;
        .text{
            font-size: 14px;
            margin-right:30px;

        }
        .selected{
            display: flex;
            flex-direction: column;
            span{
                margin-right:30px;
            }
            .main{
                font-size: 14px;
                display: flex;
                flex-direction: column;
                cursor: pointer;
                .item{
                    font-size: 14px;
                    margin-right:30px;
                    margin-left: 5px;
                    margin-bottom: 10px;
                }
            }

        }
        .active{
            color: #fa5e9d;
        }
        .dropdown{
            height:100%;

            .select{
                height:60px;
                position:relative;
                top: -400px;
                .price{
                    height:60px;
                    position:relative;
                    top: -400px;
                }
            }
        }
    }
}
</style>
